<template>
    <div>
        <yh-dialog
            drag
            :class="{ 'dialog-content': !isFullScreen }"
            :visible="riskResultShow1"
            @close="close"
            :close-on-click-modal="false"
            :fullscreen="isFullScreen"
        >
            <div slot="title" class="dialog-title header">
                <span>{{ isTrial ? '风控试算结果信息' : '下达投标指令结果' }}:</span>
                <i class="el-icon-full-screen" @click="handleFullScreen" style="display:inline-block;cursor:pointer"></i>
            </div>

            <div style="display: flex; justify-content: space-between; padding: 10px">
                <span>{{ '风控试算结果信息' }}</span>
                <el-checkbox v-model="isComplianceShow" @change="handleComplianceShow">显示合规</el-checkbox>
            </div>

            <!-- 试算结果 -->
            <RiskResult
                :riskResultTable="riskResultTableTemp"
                :stockNameSt="stockNameSt"
                @handleTableReturn="handleTableReturn"
                :key="riskResultTableKey + 'riskResultTableKey'"
                :isShowSecurity="false"
                v-if="riskResultShow1"
            ></RiskResult>

            <!-- 指令结果明细 -->
            <SingleDetail
                :transRow="transRow"
                style="margin: 10px 0"
                :key="branchCalculateResultsNumKey + 'branchCalculateResultsNumKey'"
            ></SingleDetail>

            <div slot="footer">
                <div v-if="!isTrial" style="text-align: center">
                    <div v-if="bidThresholdType !== '0'" class="result-span">
                        本次风控下单结果为: <StatusTag :code="bidThresholdType" style="font-size: 18px"></StatusTag>
                        &nbsp;,请选择以下操作：
                        <div style="display: flex; justify-content: center; margin: 5px 0">
                            <el-button v-if="['1', '2'].includes(bidThresholdType)" type="success" @click="closedDialog('continue')" size="mini"
                                >继续下达</el-button
                            >
                            <el-button type="danger" @click="closedDialog('cancel')" size="mini">关闭</el-button>
                        </div>
                    </div>
                    <div v-else>
                        <span class="result-span">
                            本次风控下单结果为: <StatusTag :code="bidThresholdType" style="font-size: 18px"></StatusTag>,投标指令已下达成功
                        </span>
                        <el-button @click="closedDialog('success')" style="margin: 5px 0" size="mini">关闭</el-button>
                    </div>
                </div>
                <div v-else>
                    <el-button @click="closedDialog('trial')" size="mini">关闭</el-button>
                </div>
            </div>
        </yh-dialog>
    </div>
</template>
<script lang="ts">
import Invest from '@/common/dict/invest';
import StatusTag from '@/pages/risk-measure/components/status-tag.vue';
import { SGU_CACHE } from '@/utils/diction-const-util';
import { Component, Vue, Prop } from 'vue-property-decorator';
import SingleDetail from '../invest-manage/single-detail.vue';
import { getInstructionResultBranchDetail } from '@/common/api/instruction';
import RiskResult from '../components/risk-result.vue';
@Component({
    name: 'RiskTrialResult',
    components: {
        RiskResult,

        StatusTag,
        SingleDetail,
    },
})
// *riskResultShow:风险结果详情是否展示
export default class RiskTrialResult extends Vue {
    @Prop() riskResultShow: boolean;

    @Prop() res;

    @Prop() type: string;

    @Prop() stockNameSt: string;

    private riskResultShow1: boolean = false;

    private isTrial: boolean = true; // 是否为试算

    private isVisible: boolean = false; // 详细信息是否可见

    private riskResultTable: any[] = []; // 风险试算结果

    private riskResultTableTemp: any[] = []; // 风险试算显示结果

    stockCodeSelectData: any[] = []; // 证券代码下拉框数据

    fundCodeSelectData: any[] = []; // 产品序号下拉框数据

    entryType = {}; // 风险类型字典

    compareDirection = {}; // 比较方向字典

    private isComplianceShow: boolean = false; // 是否显现合规

    private riskResultTableKey: number = 0; // 表格渲染Key

    Invest: any = new Invest();

    private bidThresholdType: string = ''; // 试算结果

    private transRow: any[] = []; // 传值详情

    private branchCalculateResultsNumKey: number = 0;

    private isFullScreen: boolean = false; // 是否全屏

    private ThresholdType = {
        '0': '合规',
        '1': '警告',
        '2': '送审',
        '3': '禁止',
        '4': '错误',
    };

    async mounted() {
        this.riskResultShow1 = JSON.parse(JSON.stringify(this.riskResultShow));
        // 获取产品信息 (产品序号下拉框数据)
        this.fundCodeSelectData = await SGU_CACHE('FundInfo', '/fundInfo/list', []);
        // 获取风险类型字典
        this.entryType = this.Invest.entryType;
        // 获取比较方向字典
        this.compareDirection = this.Invest.CompareDirection;

        this.bidThresholdType = this.res.thresholdType;

        this.isTrial = this.type === 'trial';

        let data = this.res.resultList || [];

        // 根据产品代码 匹配产品名称
        data.forEach(ele => {
            ele.requestId = this.res.requestId;
            // 产品名称
            for (let i = 0; i < this.fundCodeSelectData.length; i++) {
                const item = this.fundCodeSelectData[i];
                if (ele.fundCode === item.fundCode) {
                    ele.fundNameSt = item.fundNameSt;
                }
            }
            ele.stockNameSt = this.stockNameSt;
        });

        data = data.sort((a, b) => parseInt(a.thresholdType) - parseInt(b.thresholdType));

        this.riskResultTable = data;

        if (this.riskResultTable.length > 0) {
            let value = this.riskResultTable.find(item => item.thresholdType !== '0');
            if (value) {
                this.handleTableReturn(value);
            }
        }

        this.handleComplianceShow();
    }

    // 显示合规处理
    private handleComplianceShow() {
        let data = this.riskResultTable;
        if (!this.isComplianceShow) {
            data = this.riskResultTable.filter(item => item.thresholdType !== '0');
        }
        this.$set(this, 'riskResultTableTemp', data);
        this.riskResultTableKey++;
    }

    // 直接关闭弹窗
    private closedDialog(type) {
        if (type === 'continue') {
            this.$emit('riskResultReturn', 'continue');
        } else if (type === 'cancel') {
            this.$emit('riskResultReturn', 'cancel');
        } else if (type === 'success') {
            this.$emit('riskResultReturn', 'continue');
        } else if (type === 'trial') {
            // 试算关闭不清空，不处理只关闭
        }
        this.riskResultShow1 = false;
    }

    private close() {
        // 如果是试算直接关闭弹窗
        if (this.riskResultShow1) {
            if (this.type === 'trial') {
                this.closedDialog('trial');
            } else if (this.res) {
                if (this.res.thresholdType === '0') {
                    // 如果是合规直接关闭弹窗
                    this.closedDialog('success');
                } else {
                    // 如果不是合规，直接删除指令
                    this.closedDialog('cancel');
                }
            }
        }
    }

    // 点击行返回操作
    private handleTableReturn(row: any): void {
        getInstructionResultBranchDetail(row.requestId, row.entryKey, row.groupCode, row.stockCode, true)
            .then(res => {
                let branchDetailData = JSON.parse(JSON.stringify(row));
                branchDetailData.branchCalculateResults = res || [];
                branchDetailData.branchCalculateResults.forEach(item => {
                    item.branchCalulateTypeResults = JSON.parse(item.branchCalulateTypeResults || '{}');
                    item.calculateDetails = JSON.parse(item.calculateDetails || '{}');
                });
                this.transRow = branchDetailData;
                this.branchCalculateResultsNumKey++;
            })
            .catch(() => {});
    }

    // 是否全屏
    private handleFullScreen() {
        this.isFullScreen = !this.isFullScreen;
    }
}
</script>
<style lang="scss" scoped>
.result-span {
    font-size: 20px;
    display: block;
    & /deep/ .el-tag.el-tag--mini {
        font-size: 18px;
    }
}

/deep/ .el-dialog {
    min-width: 1000px;
    .el-dialog__body {
        padding: 0 10px;
        max-height: 100vh;
    }
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 42px;
        line-height: 42px;
        margin-right: 20px;
    }
}
.dialog-content /deep/ .el-dialog {
    margin-top: 1vh !important;
}
/deep/ .vxe-table .vxe-table--main-wrapper .vxe-table--body-wrapper {
    height: 30vh !important;
}
</style>
